<div class="wrapper">
	<div class="tab-list">
		<button [class.selected]="selectedTab === 'all'" class="tab" value="all"
			(click)="getFilterResults($event.currentTarget.value)">
			All
		</button>
		<button [class.selected]="selectedTab === 'image'" class="tab" value="image"
			(click)="getFilterResults($event.currentTarget.value)">
			Images
		</button>
		<button [class.selected]="selectedTab === 'video'" class="tab" value="video"
			(click)="getFilterResults($event.currentTarget.value)">
			Videos
		</button>
		<button [class.selected]="selectedTab === 'news'" class="tab" value="news"
			(click)="getFilterResults($event.currentTarget.value)">
			News
		</button>
	</div>

	<div class="tools">
		<button (click)="toggleSearchTools()" class="tab tool-tab">
			Tools
		</button>
		<button (click)="viewButtonChecked = !viewButtonChecked"
				class="tab views">
			Views
		</button>
		<div class="tool-list" [class.show]="showTools">
			<div class="search-tools">
				<div class="time-bound-search">
					<button mat-button class="toggleButton"
						(click)="timeBoundButtonChecked = true"
						[class.pressed]="timeBoundButtonChecked"
						[matMenuTriggerFor]="timeBoundMenu">
						{{timeBoundValue}}
						<mat-icon>arrow_drop_down</mat-icon>
					</button>
					<mat-menu #timeBoundMenu="matMenu" [overlapTrigger]="false" (close)="timeBoundButtonChecked = false">
						<button mat-menu-item value="any"
							(click)="getTimeBoundResults($event.currentTarget.value)">
							<h5 class="display-media">Any time</h5>
						</button>
						<button mat-menu-item value="lastDay"
							(click)="getTimeBoundResults($event.currentTarget.value)">
							<h5 class="display-media">Past 24 hours</h5>
						</button>
						<button mat-menu-item value="lastWeek"
							(click)="getTimeBoundResults($event.currentTarget.value)">
							<h5 class="display-media">Past week</h5>
						</button>
					</mat-menu>
				</div>

				<div class="location-based-search">
					<button mat-button class="toggleButton"
						(click)="locationButtonChecked = true"
						[class.pressed]="locationButtonChecked"
						[matMenuTriggerFor]="locationMenu">
						{{locationValue}}
						<mat-icon>arrow_drop_down</mat-icon>
					</button>
					<mat-menu #locationMenu="matMenu" [overlapTrigger]="false" (close)="locationButtonChecked = false">
						<button mat-menu-item value="all"
							(click)="getLocationBasedResults($event.currentTarget.value)">
							<h5 class="display-media">All Countries</h5>
						</button>
						<button mat-menu-item value="India"
							(click)="getLocationBasedResults($event.currentTarget.value)">
							<h5 class="display-media">India</h5>
						</button>
						<button mat-menu-item value="China"
							(click)="getLocationBasedResults($event.currentTarget.value)">
							<h5 class="display-media">China</h5>
						</button>
						<button mat-menu-item value="US"
							(click)="getLocationBasedResults($event.currentTarget.value)">
							<h5 class="display-media">US</h5>
						</button>
						<button mat-menu-item value="UK"
							(click)="getLocationBasedResults($event.currentTarget.value)">
							<h5 class="display-media">UK</h5>
						</button>
					</mat-menu>
				</div>
			</div>
			<div class="message"
				*ngIf="!(isSearching$ | async) && (areResultsAvailable$ | async)">
				<!-- Hook up a message if needed like google does "About xxxxx results (y.yy seconds)" -->
			</div>
		</div>
		<a mat-menu-item class="media-wall-route views-search"
			*ngIf="viewButtonChecked"
			type="button"
			[routerLink]="['/wall']"
			[queryParams]="{ query : (query$ | async).queryString }"
			target="_blank">
				<h5 class="display-media">Display as Media Wall</h5>
		</a>
		<a routerLink="/settings" target="_blank" class="tab tab_setting">
			Settings
		</a>
	</div>
</div>
